<template>
  <div class="select-container">
    <van-cell :title="title" value-class="cell" :value="value || placeholder" @click="isShowPopup = true" is-link>
      <template slot="right-icon">
        <!-- <van-icon name="clear" class="clear" v-if="value || value === 0" @click.stop="clear" /> -->
      </template>
    </van-cell>
    <van-popup v-model="isShowPopup" position="bottom" class="popup">
      <van-datetime-picker
        v-model="time"
        type="time"
        title="选择时间"
        :filter="timeFilter"
        @cancel="isShowPopup = false"
        @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'SelectTime',
  props: {
    title: {
      type: String,
      default: '选择时间'
    },
    value: {
      default: () => '12:00'
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data () {
    return {
      isShowPopup: false,
      time: '12:00'
    }
  },
  watch: {
    value () {
      this.time = this.value
    }
  },
  methods: {
    timeFilter (type, options) {
      if (type === 'minute') {
        return options.filter((option) => Number(option) % 30 === 0)
      }
      return options
    },
    onConfirm (e, val) {
      this.isShowPopup = false
      this.$emit('input', this.time)
    },
    clear () {
      this.$emit('input', undefined)
    }
  },
  created () {
    this.time = this.value
  }
}
</script>

<style scoped lang='less'>
.select-container {
  .cell {
    text-align: left;
    flex: 2.2;
  }
  .clear {
    margin-top: 4px;
    font-size: 16px; color: #ccc;
  }
}
</style>
